<template>
	<view :data-theme="themeStyle">
		<template v-if="isNetWorkError">
			<network-error @refresh="refreshExec"></network-error>
		</template>
		<template v-else>
			<view class="user-section ns-gradient-pages-member-index-index" :data-theme="defaultInfo.topStyle == 'default' ? themeStyle : ''" >
				<view class="user-section-box">
					<view class="user-info-box flex align-center" v-if="isLogin">
						<view @click="$util.redirectTo('/pages/member/info/info')" class="user-head">
							<image
								:src="memberInfo.headimg ? $util.img(memberInfo.headimg) :defaultAvatar"
								mode="aspectFill"
								@error="memberInfo.headimg =defaultAvatar"
							></image>
						</view>
						<view class="user-box">
							<text class="user-title" :style="defaultTextColor">{{ memberInfo.nickname }}</text>
						<!-- 	<block v-if="memberInfo.member_level_type == 0">
								<view v-if="memberInfo.member_level_name" @click="$util.redirectTo('/otherpages/member/level/level')" class="user-label">
									<text>{{ memberInfo.member_level_name }}</text>
								</view>
							</block>
							<block v-else>
								<view v-if="memberInfo.member_level_name" @click="$util.redirectTo('/otherpages/member/card/card')" class="user-label">
									<text>{{ memberInfo.member_level_name }}</text>
								</view>
							</block> -->
						</view>
					</view>
					<view class="user-info-box no-log flex align-center" v-if="!isLogin" @click="redirectToLink('/pages/member/index/index')">
						<view class="user-head"><image :src="defaultAvatar"></image></view>
						<view class="user-box">
							<text class="user-title" :style="defaultTextColor">{{ $lang('login') }}</text>
						</view>
					</view>
					<view class="user-set">
						 <!-- v-if="isLogin" -->
						<!-- <view :style="defaultTextColor" class="iconfont icontiaoxingmasaomiao" @click="codeView"></view> -->
						<view :style="defaultTextColor" class="iconfont iconshezhi"  @click="$util.redirectTo('/magicpages/setting/setting')" ></view>
						<!-- <view :style="defaultTextColor" class="iconfont iconziyuan"></view> -->
					</view>
					
				</view>
				<!-- 订单模块 -->
				<view class="order-section">
					<view class="order-head flex justify-between align-center" @click="redirectToLink('/pages/order/list/list')">
						<text class="order-tit">{{ $lang('allOrders') }}</text>
						<text class="order-tip">{{ $lang('seeAllOrders') }}</text>
						<text class="order-more iconfont iconright"></text>
					</view>
					<view class="order-body">
						<view class="order-item" @click="redirectToLink('/pages/order/list/list?status=waitpay')">
							<view class="order-icon">
								<text v-if="orderNum.waitPay > 99" class="order-num color-base-bg">99+</text>
								<text v-else-if="orderNum.waitPay > 0" class="order-num color-base-bg">{{ orderNum.waitPay }}</text>
							
								<text class="iconfont1 icon-daifukuan order-icon-size"></text>
							</view>
							<text class="order-name">{{ $lang('waitPay') }}</text>
						</view>
						<view class="order-item" @click="redirectToLink('/pages/order/list/list?status=waitsend')">
							<view class="order-icon">
								<text v-if="orderNum.readyDelivery > 99" class="order-num color-base-bg">99+</text>
								<text v-else-if="orderNum.readyDelivery > 0" class="order-num color-base-bg">{{ orderNum.readyDelivery }}</text>
								<text class="iconfont1 icon-_daifahuo order-icon-size"></text>
							</view>
							<text class="order-name">{{ $lang('readyDelivery') }}</text>
						</view>
						<view class="order-item" @click="redirectToLink('/pages/order/list/list?status=waitconfirm')">
							<view class="order-icon">
								<text v-if="orderNum.waitDelivery > 99" class="order-num color-base-bg">99+</text>
								<text v-else-if="orderNum.waitDelivery > 0" class="order-num color-base-bg">{{ orderNum.waitDelivery }}</text>
								<text class="iconfont1 icon-icon3 order-icon-size"></text>
							</view>
							<text class="order-name">{{ $lang('waitDelivery') }}</text>
						</view>
						<view class="order-item" @click="redirectToLink('/pages/order/list/list?status=waitrate')">
							<view class="order-icon">
								<block v-if="evaluateConfig.evaluate_status == 1">
									<text v-if="orderNum.waitEvaluate > 99" class="order-num color-base-bg">99+</text>
									<text v-else-if="orderNum.waitEvaluate > 0" class="order-num color-base-bg">{{ orderNum.waitEvaluate }}</text>
								</block>
								<text class="iconfont1 icon-daipingjia order-icon-size"></text>
							</view>
							<text class="order-name">{{ $lang('waitEvaluate') }}</text>
						</view>
						<view class="order-item" @click="redirectToLink('/pages/order/activist/activist')">
							<view class="order-icon">
								<text v-if="orderNum.refunding > 99" class="order-num color-base-bg">99+</text>
								<text v-else-if="orderNum.refunding > 0" class="order-num color-base-bg">{{ orderNum.refunding }}</text>
								<text class="iconfont1 icon-tuikuantuihuo order-icon-size"></text>
							</view>
							<text class="order-name">{{ $lang('refunding') }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="member-body">
				<!-- 会员卡 -->
				<view v-if="membercard" class="member-level" @click="$util.redirectTo('/otherpages/member/card_buy/card_buy')">
					<view class="member-level-box">
						<text class="iconfont iconhuiyuan"></text>
						<view class="info-wrap">
							<text class="font-size-tag">开通{{ membercard.level_name }}，立省更多</text>
						</view>
						<text class="memeber-tit"><text class="member-btn">立即开通</text></text>
					</view>
				</view>
			
				
				<magicCard class="magic-card" headerTitle="常用工具">
					<template #headerRight>
						<view></view>
					</template>
					<template #body>
						<view class="flex tool-body">
							<view @click="redirectToLink('/magicpages/magic/box_ark')" class="body-item flex flex-column justify-center align-center">
								<text class="iconfont1 box-ark-icon icon-hezi"></text>
								<text class="body-text">盒柜</text>
							</view>
							<view @click="redirectToLink('/otherpages/member/address/address')" class="body-item flex flex-column justify-center align-center">
								<text class="iconfont1 address-icon icon-dizhi"></text>
								<text class="body-text">收货地址</text>
							</view>
							<view @click="redirectToLink('/otherpages/member/coupon/coupon')"  class="body-item flex flex-column justify-center align-center">
								<text class="iconfont1 coupon-icon icon-youhuiquan1"></text>
								<text class="body-text">优惠券</text>
							</view>
							<view @click="redirectToLink('/otherpages/member/footprint/footprint')" class="body-item flex flex-column justify-center align-center">
								<text class="iconfont1 footprint-icon icon-jilu"></text>
								<text class="body-text">我的足迹</text>
							</view>
							<!-- #ifdef APP-PLUS -->
							<view class="body-item flex flex-column justify-center align-center">
								<text @click="redirectToLink('/pages/member/index/index')" class="iconfont1 concat-icon icon-wentifankui-wentifaqi"></text>
								<text class="body-text">问题反馈</text>
								<button v-if="isLogin" type="default" open-type="feedback" class="feedback"></button>
							</view>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<view @click="redirectToLink('/magicpages/service/service')" class="body-item flex flex-column justify-center align-center">
								<text class="iconfont1 concat-icon icon-wentifankui-wentifaqi"></text>
								<text class="body-text">问题反馈</text>
							</view>
							<!-- #endif -->
							<view @click="redirectToLink('/magicpages/service/concat')" class="body-item flex flex-column justify-center align-center">
								<text class="iconfont1 service-icon icon-kefuyihuifu"></text>
								<text class="body-text">联系客服</text>
							</view>
						</view>
					</template>
				</magicCard>
			</view>
			<view class="padding-bottom"><ns-copy-right></ns-copy-right></view>
			<ns-login ref="login"></ns-login>
	<!-- 		<loading-cover ref="loadingCover"></loading-cover> -->
			<!-- 条形码、二维码弹窗 -->
			<uni-popup ref="erWeiPopup" type="center">
				<view class="popupContent">
					<view class="popupContent-top" @click="obtain">
						<view class="popupContent-top-title">
							<view :style="defaultTextColor" class="iconfont iconerweima"></view>
							<view class="popupContent-top-title-txt">会员码</view>
						</view>
						<view class="popupContent-top-tiao">
							<image :src="$util.img(barcode)" mode=""></image>
						</view>  
						<view class="popupContent-top-erwei">
							<image :src="$util.img(QRcode)" mode=""></image>
						</view>
						<view class="popupContent-top-shauxin" @click="obtain">
							<text>动态码  {{dynamic_number}}</text>
							<i class="iconfont iconshuaxin"></i>
						</view>
						<view class="popupContent-top-text">如遇到扫码失败请将屏幕调至最亮重新扫码</view>
					</view>
				    <view class="popupContent-bottom">
						<i :style="defaultTextColor" class="iconfont iconfont-delect icon2guanbi" @click="close"></i>
					</view>
				</view>
			</uni-popup>
		</template>
		
	</view>
</template>

<script>
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
import scroll from '@/common/js/scroll-view.js';
import nsCopyRight from '@/components/ns-copyright/ns-copyright.vue';
// import fenxiaoWords from '@/common/js/fenxiao-words.js';
import globalConfig from '@/common/js/golbalConfig.js';
import defaultAvatar from "@/static/image/avatar.png"
import magicCard from "@/components/magic-box/magic-card/index.vue"
export default {
	components: {
		uniGrid,
		uniGridItem,
		diyBottomNav,
		nsCopyRight,
		magicCard
	},
	data() {
		return {
			defaultAvatar,
			token: '',
			memberInfo: {
				balance: 0,
				balance_money: 0,
				point: 0
			},
			couponNum: 0,
			orderNum: {
				waitPay: 0, //待付款
				readyDelivery: 0, //待发货
				waitDelivery: 0, //待收货
				waitEvaluate: 0, // 待评价
				refunding: 0 // 退款中
			},
			isVerification: true,
			copyrightLoad: 0,
			bottom_info: {},
			authInfo: {
				is_verifier: false
			},

			shopTop: false,
			scrollTop: 0,
			shopConfig: null,
			promoterInfo: null,
			withdrawConfig: null,
			fenxiaoBasicsConfig: null,
			defaultInfo: {
				topStyle: 'default',
				bgColor: '#ff454f',
				textColor: '#fff',
				bgImg: '',
				menuList: [],
				insertGap: '0',
				menuStyle: 'palace',
				level: 1
			},
			signState: 1, // 签到是否开启
			evaluateConfig: {
				evaluate_audit: 1,
				evaluate_show: 0,
				evaluate_status: 1
			},
			memberrecommend: 0,
			membercard: null,
			// 条形码/二维码图片
			QRcode:"",
			barcode:"",
			// 定时器清除
			time:null,
			scannings:null,
			// 扫码后执行下一步路由和参数
			routerParameter:"",
			// 动态码
			dynamic_number:""
		};
	},
	mixins: [scroll, globalConfig],
	computed: {
		isLogin() {
			return this.$store.state.isLogin || false;
		},
		storeToken() {
			return this.$store.state.token;
		},
		defaultBgColor() {
			var val = '';
			if (this.defaultInfo.topStyle != 'default') {
				val = 'background:' + this.defaultInfo.bgColor;
			}
			return val;
		},
		defaultBgImg() {
			var defaultImg = '';
			if (this.defaultInfo.topStyle != 'default') {
				defaultImg = this.defaultInfo.bgImg ? this.$util.img(this.defaultInfo.bgImg) : '';
			} else {
				defaultImg = this.$util.img('upload/uniapp/member/index/member_bg.png');
			}
			return defaultImg;
		},
		defaultTextColor() {
			var textColor = '';
			if (this.defaultInfo.topStyle != 'default') {
				textColor = 'color:' + this.defaultInfo.textColor + ' !important';
			}
			return textColor;
		}
	},
	watch: {
		isLogin(){
			this.refresh()
		},
		storeToken: async function(nVal, oVal) {
			if (this.addonIsExit.membersignin) {
				await this.getSignState();
			}
			await this.getMemberInfo();
			this.getOrderNum();
			this.getCouponNum();
			this.checkIsVerifier();
		}
	},
	onLoad() {
		if (this.addonIsExit.memberwithdraw) {
			this.getWithdrawConfig();
		}
		this.getEvaluateConfig();
	},
	async onReady() {
		await this.getDefaultInfo();
		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
	},
	async onShow() {
		// 刷新多语言
		this.$langConfig.refresh();

		this.token = uni.getStorageSync('token');

		if (uni.getStorageSync('userInfo')) {
			this.memberInfo = uni.getStorageSync('userInfo');
		}
		if (this.token) {
			if (this.addonIsExit.membersignin) {
				await this.getSignState();
			}
			await this.getMemberInfo();
			this.getOrderNum();
			this.getCouponNum();
			this.checkIsVerifier();
		} else {
			this.initInfo();
		}

		if (this.addonIsExit.memberrecommend) {
			this.getMemberRecommend();
		}
	},
	methods: {
		async refresh(){
			if (uni.getStorageSync('userInfo')) {
				this.memberInfo = uni.getStorageSync('userInfo');
			}
			if (this.addonIsExit.memberwithdraw) {
				this.getWithdrawConfig();
			}
			this.getEvaluateConfig();
			
			await this.getDefaultInfo();
			if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
		},
		// 签到是否开启
		async getSignState() {
			try{
				var res = await this.$api.sendRequest({
					url: '/api/membersignin/getSignStatus',
					async: false
				});
				if (res.code == 0) {
					this.signState = res.data.is_use;
				}
			}catch(e){
				//TODO handle the exception
			}
		
		},
		async getDefaultInfo() {
			var res = await this.$api.sendRequest({
				url: '/api/diyview/memberindex',
				async: false
			});
			if (res.code == 0) {
				this.defaultInfo.topStyle = res.data.topStyle;
				this.defaultInfo.bgColor = res.data.bgColor;
				this.defaultInfo.textColor = res.data.textColor;
				this.defaultInfo.bgImg = res.data.bgImg;
				this.defaultInfo.menuStyle = res.data.menuStyle;
				this.defaultInfo.menuList = res.data.menuList;
				this.defaultInfo.insertGap = res.data.insertGap;
				this.defaultInfo.level = res.data.level || 1;
			}
		},
		redirectToLink(url) {
			if (!uni.getStorageSync('token')) {
				this.$util.redirectTo('/otherpages/login/login/login', { back: encodeURIComponent(url) });
				// this.$refs.login.open(url);
			} else {
				this.$util.redirectTo(url);
			}
		},
		diyRedirect(data){
			console.log("trigger ???",data)
			if (data.url == '') {
				if (data.appid) {
					uni.navigateToMiniProgram({
						appId: data.appid,
						path: data.page
					})
				} else if (data.mobile) {
					uni.makePhoneCall({ phoneNumber: data.mobile });
				}
			} else if (data.url.indexOf('http') != -1) {
				this.redirectTo('/otherpages/web/web?src=' + data.url);
			} else {
				this.redirectToLink(data.url);
			}
		},
		initInfo() {
			this.token = '';
			this.memberInfo = {
				balance: '0.00',
				balance_money: '0.00',
				point: 0
			};
			this.couponNum = 0;
			this.orderNum = {
				waitPay: 0, //待付款
				readyDelivery: 0, //待发货
				waitDelivery: 0, //待收货
				waitEvaluate: 0, // 待评价
				refunding: 0 // 退款中
			};
			this.authInfo = {
				is_verifier: false
			};
			uni.stopPullDownRefresh();
		},
		// 获取会员基础信息
		async getMemberInfo() {
			let res = await this.$api.sendRequest({
				url: '/api/member/info',
				async: false
			});
			if (res.code >= 0 && res.data) {
				this.token = uni.getStorageSync('token');
				this.memberInfo = res.data;
				uni.setStorageSync('userInfo', this.memberInfo);
				if (this.addonIsExit.supermember && this.memberInfo.member_level_type == 0) this.getMemberCardInfo();
			} else {
				this.token = '';
				this.initInfo();
				uni.removeStorageSync('token');
				uni.removeStorageSync('userInfo');
			}
			uni.stopPullDownRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (uni.getStorageSync('token')) this.getMemberInfo();
			else this.initInfo();
		},
		// 订单数量
		getOrderNum() {
			this.$api.sendRequest({
				url: '/api/order/num',
				data: {
					order_status: 'waitpay,waitsend,waitconfirm,waitrate,refunding'
				},
				success: res => {
					if (res.code == 0) {
						this.orderNum.waitPay = res.data.waitpay;
						this.orderNum.readyDelivery = res.data.waitsend;
						this.orderNum.waitDelivery = res.data.waitconfirm;
						this.orderNum.waitEvaluate = res.data.waitrate;
						this.orderNum.refunding = res.data.refunding;
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		// 优惠券数量
		getCouponNum() {
			this.$api.sendRequest({
				url: '/coupon/api/coupon/num',
				success: res => {
					if (res.code == 0) {
						this.couponNum = res.data;
					}
				}
			});
		},
		checkIsVerifier() {
			this.$api.sendRequest({
				url: '/api/verify/checkisverifier',
				success: res => {
					this.authInfo.is_verifier = res.code == 0;
					this.$forceUpdate();
				}
			});
		},
		jumpLevel() {
			if (uni.getStorageSync('token')) {
				this.$util.redirectTo('/otherpages/member/level/level');
			} else {
				this.$util.redirectTo('/otherpages/login/login/login', { back: encodeURIComponent('/pages/member/index/index') });
				// this.$refs.login.open('/pages/member/index/index');
			}
		},
		/**
		 * 获取余额提现配置
		 */
		getWithdrawConfig() {
			this.$api.sendRequest({
				url: '/api/memberwithdraw/config',
				success: res => {
					if (res.code >= 0 && res.data) {
						this.withdrawConfig = res.data;
						this.$forceUpdate();
					}
				}
			});
		},
		/**
		 * 获取分销基本配置
		 */
		getFenxiaoBasicsConfig() {
			this.$api.sendRequest({
				url: '/fenxiao/api/config/basics',
				success: res => {
					if (res.code >= 0) {
						this.fenxiaoBasicsConfig = res.data;
						this.$forceUpdate();
					}
				}
			});
		},
		getEvaluateConfig() {
			this.$api.sendRequest({
				url: '/api/goodsevaluate/config',
				success: res => {
					if (res.code == 0) {
						var data = res.data;
						this.evaluateConfig = data;
					}
				}
			});
		},
		menuIsShow(data) {
			switch (data.tag) {
				case 'fenxiao':
					return this.addonIsExit.fenxiao == 1 && this.fenxiaoBasicsConfig && this.fenxiaoBasicsConfig.level > 0;
					break;
				case 'memberwithdraw':
					return this.withdrawConfig && this.withdrawConfig.is_use == 1;
					break;
				case 'membersignin':
					return this.signState == 1;
					break;
				case 'verifier':
					return this.authInfo.is_verifier;
					break;
				case 'memberrecommend':
					return this.addonIsExit.memberrecommend && this.memberrecommend;
					break;
				default:
					return true;
			}
		},
		getMemberRecommend() {
			this.$api.sendRequest({
				url: '/memberrecommend/api/memberrecommend/info',
				success: res => {
					if (res.code == 0 && res.data) {
						this.memberrecommend = 1;
					}
				}
			});
		},
		getMemberCardInfo() {
			this.$api.sendRequest({
				url: '/supermember/api/membercard/firstcard',
				success: res => {
					if (res.code == 0 && res.data) {
						this.membercard = res.data;
					}
				}
			});
		},
	    // 二维码弹窗打开
		codeView(){
			this.$refs.erWeiPopup.open()
			clearInterval(this.time)
			this.obtain()
			this.time=setInterval(()=>{
				this.obtain()
			},30000)
		},
		// 获取二维码
		obtain(){ 
			let _self = this;
			var res = this.$api.sendRequest({
				url: '/api/member/membereqrcode',
				data: {
					page:''
				},
				success:function(res){
					_self.barcode=res.bar_code;
					_self.QRcode=res.data.path;
					_self.routerParameter=res.data.url;
					_self.dynamic_number=res.dynamic_number;

				},
			});
		},
		// 关闭二维码弹窗
		close(){
			this.$refs.erWeiPopup.close()
			clearInterval(this.time)
		},
		uini(){
			this.$api.sendRequest({
				url: '/api/member/qrcodereduceaccount',
				data: {
					money: '1'
				},
				success: res => {
					console.log(res)
				},
				fail: err => {
					console.log(err)
				}
			})
		}
	}
};
</script>

<style lang="scss">
@import '../public/css/index.scss';
/deep/.uni-scroll-view::-webkit-scrollbar {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
}
</style>
<style scoped>
/deep/ .reward-popup .uni-popup__wrapper-box {
	background: none !important;
	max-width: unset !important;
	max-height: unset !important;
}
.member_status{
	background: linear-gradient(35deg, #7ED5F9, #6665FE, #E631FD);
}
</style>
